var app = angular.module('myApp', []);

app.directive('accordion', function(){
	return {
		restrict: 'EA',
		replace: true,
		transclude : true,
		template: '<div ng-transclude></div>',
		link : function(scope){
			// console.info(scope);
			scope.refresh = function(cur){
				angular.forEach(scope.expanders, function(expander){
					if(cur != expander){
						expander.showMe = false;
					}
				});
			};
		}
	};
});

app.directive('expander', function() {
	return {
		'restrict': 'EA', //E:元素，<myDirect></myDirect>;A:属性，<div myDirect></div>;C:样式，<div class="myDirect"></div>;M:注释，<!-- directive: myDirect -->
		
		replace: true,//替换当前标签
		transclude: true,//保留标签内的内容，在模板中使用<span ng-transclude></span>注明原始内容保留在哪,以span标签包裹
		require: '^?accordion',
		scope: {
			expander : '=expanderModel'
		},
		templateUrl: 'tpl/expander.html', //模板
		link : function(scope, element, attrs, accordionController){
			scope.expander.showMe = false;
			scope.toggle = function(){
				scope.expander.showMe = !scope.expander.showMe;
				scope.$parent.refresh(scope.expander);
			};
		}
	};
});

app.controller('firstController', function($scope) {
	$scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});